<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>老师管理界面</title>
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap-table.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap-table.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/locale/bootstrap-table-zh-CN.js"></script>
</head>
<script type="text/javascript">
	var arr=[];
	$(function(){
		
		$.ajax({
			url:"${pageContext.request.contextPath}/QueryGrade",
			dataType:"json",
			type:"post",
			success:function(data){
				for(var i in data){
					$("[name='gid']").append("<option value='"+data[i].id+"'>"+data[i].gradename+"</option>");
					$("#gid").append("<option value='"+data[i].gradename+"'>"+data[i].gradename+"</option>");
				}	
			}
		})
		
		
		$("#table").bootstrapTable({
			url:"${pageContext.request.contextPath}/TeacherList",
			toolbar:"#toolbar",
			method:"post",
			dataType:"json",
			sidePagination:"server",
			pagination : true,//设置为 true 会在表格底部显示分页条
			paginationLoop : true,//设置为 true 启用分页条无限循环的功能。
			pageNumber:1,
			pageSize:3,
			pageList:[ 3, 6, 9],
			contentType:"application/x-www-form-urlencoded",
			queryParamsType : "",
			//请求服务器数据
			queryParams : queryParams,
			columns:[
				{
					checkbox:true
				},
				{
					field:"id",
					title:"编号",
					align:"center"
				},
				{
					field:"teacherName",
					title:"姓名",
					align:"center"
				},
				{
					field:"teacherNum",
					title:"工号",
					align:"center"
				},
				{
					field:"gradename",
					title:"年级",
					align:"center"
				},
				{
					field:"phone",
					title:"电话",
					align:"center"
				},
				{
					field:"address",
					title:"地址",
					align:"center"
				},
				{
					field:"sex",
					title:"性别",
					align:"center"
				},{
					field:"age",
					title:"年龄",
					align:"center"
				}
			],
			onCheck:function(row){
				arr.push(row.teacherNum);
			},
			onUncheck:function(row){
				//判断row.studentNum是否在arr数组中不在返回-1
				var local=$.inArray(row.studentNum,arr);
				if(local!=-1){
					arr.splice(local,1);//删除arr数组中的数据
				}
			}
		})
	})
	function queryParams(params){
		var likeName=$("#realname").val();
		var teacherNum=$("#teacherNum").val();
		var gradeName=$("#gid").val();
		var param={
			pageNumber:params.pageNumber-1,
			pageSize:params.pageSize,
			likeName:likeName,
			teacherNum:teacherNum,
			gradeName:gradeName
		}
		return param;
	}
	function del(){
		var row=$("#table").bootstrapTable('getSelections');
		if(row[0]==null){
			alert("请选中一行进行修改");
		}else{
		$.ajax({
			url:"${pageContext.request.contextPath}/DeleteTeacherMessage",
			dataType:"json",
			type:"get",
			data:{
			 arr:arr
			},
			success:function(data){
				if(data){
					alert("删除成功");
					$("#table").bootstrapTable("refresh");
				}
			}
		})
		}
	}
	function add(){
		var teacherName=$("[name='teacherName']").val();
		var gid=$("[name='gid']").val();
		var address=$("[name='address']").val();
		var phone=$("[name='phone']").val();
		var sex=$("[name='sex']").val();
		var age=$("[name='age']").val();
		$.ajax({
			url:"${pageContext.request.contextPath}/InsertTeacher",
			dataType:"json",
			type:"post",
			data:{
				teacherName:teacherName,
				gid:gid,
				address:address,
				phone:phone,
				sex:sex,
				age:age
			},
			success:function(data){
				if(data){
					alert("true");
					$("#table").bootstrapTable("refresh");
				}
			}
		})
	}
	function refresh(){
		var likeName=$("#realname").val();
		var teacherNum=$("#teacherNum").val();
		var gradeName=$("#gid").val();
		  $.ajax({
				url:"${pageContext.request.contextPath}/TeacherList",
				dataType:"json",
				type:"post",
				data:{
					likeName:likeName,
					teacherNum:teacherNum,
					gradeName:gradeName
				},
				success:function(data){
					$("#table").bootstrapTable("refreshOptions",{pageNumber:1});
				}
			})
	}
	function upd(){
		var row=$("#table").bootstrapTable('getSelections');
		if(row[0]==null){
			alert("请选中一行进行修改");
		}else{
				var id1 =row[0].id;
		       var teacherName=row[0].teacherName;
		       var gradeName1=row[0].gradename;
		       var phone1=row[0].phone;
		       var address1=row[0].address;
		       var sex1=row[0].sex;
		       var age1=row[0].age;
		      var teacherNum=row[0].teacherNum;
		       $("[name='id1']").val(id1);
		       $("[name='teacherNum1']").val(teacherNum);
		     $("[name='teacherName1']").val(teacherName);
		     $("[name='gradeName1']").val(gradeName1);
		     $("[name='phone1']").val(phone1);
		     $("[name='address1']").val(address1);
		     $("[name='sex1']").val(sex1);
		     $("[name='age1']").val(age1);
		}
       
	}
	function Upd(){
			var id1= $("[name='id1']").val();
			var teacherName1= $("[name='teacherName1']").val();
		 	var gradeName1=$("[name='gradeName1']").val();
		 	var phone1=$("[name='phone1']").val();
		 	var address1=$("[name='address1']").val();
		 	var sex1=$("[name='sex1']").val();
		 	var age1=$("[name='age1']").val();
		 alert(age1);
		 	$.ajax({
				url:"${pageContext.request.contextPath}/UpdateTeacher",
				dataType:"json",
				type:"post",
				data:{
					id1:id1,
					teacherName1:teacherName1,
					gradeName1:gradeName1,
					phone1:phone1,
					address1:address1,
					sex1:sex1,
					age1:age1
				},
				success:function(data){
					if(data){
						alert("修改成功");
						$("#table").bootstrapTable("refresh");
					}else{
						alert("修改失败");
					}
				}
			})	
	}
</script>
<style>
	#modalP{
		padding:10px;
		width:500px;
		height:55px;
		margin:0 auto;
		line-height:55px;
		font-size:15px;
	}
	#modalP1{
		padding:10px;
		width:500px;
		height:55px;
		margin:0 auto;
		line-height:55px;
		font-size:15px;
	}
	#modalP>input{
		width:300px;
		height:30px;
	}
	#modalP>select{
		width:300px;
		height:30px;
	}
	.modalSpan{
		display:inline-block;
		width:100px;
		height:30px;
		line-height:30px;
		text-align:right;
	}
	
</style>
<body>
<div class="col-sm-12 col-md-12">
		<div class="main-container">
		<div class="panel panel-default" style="margin: 0;padding: 0">
			<div class="panel-heading">搜索</div>
			<div class="panel-body">
				<form role="form" class="form-inline">
					<div class="form-group">教师姓名：</div>
					<input id="realname" type="text" class="form-control input-sm"
						placeholder=""> &nbsp;
						<div class="form-group">教师工号：</div>
					<input id="teacherNum" type="text" class="form-control input-sm"
						placeholder=""> &nbsp;
						<div class="form-group">所在年级:</div>
					<select id="gid" class="form-control input-sm">
						<option value="">-请选择-</option>
					</select>
					<div class="form-group">
						<button class="btn btn-reset glyphicon glyphicon-search"
							type="button" onclick="reset()">清空</button>
					</div>
					<div class="form-group">
						<button class="btn btn-success glyphicon glyphicon-search"
							type="button" onclick="refresh()">搜索</button>
					</div>
				</form>
					</div>
		</div>
			<div id="toolbar">
				<button class="btn btn-primary btn-gt glyphicon glyphicon-plus-sign" data-toggle="modal"  data-target="#insert" >添加</button>
				<button class="btn btn-info btn-gt glyphicon glyphicon glyphicon-circle-arrow-up" onclick="upd()" data-toggle="modal"  data-target="#update">修改</button>
				<button class="btn btn-success btn-gt glyphicon glyphicon-asterisk" onclick="del()">删除</button>
				<button class="btn btn-success btn-gt glyphicon glyphicon glyphicon-share-alt" ">导出</button>
			</div>
			<table id="table" ></table>
			<!-- 添加老师的模态框 -->
				<div class="modal fade" id="insert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">添加老师信息</h4>
			            </div>
			            <div class="modal-body">
			            	<p id="modalP">
			            		<span class="modalSpan">教师姓名:</span>
			            		<input type="text" name="teacherName" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年级:</span>
			            		<select name="gid" >
			            			<option value="">请选择</option>
			            		</select>
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">手机号:</span>
			            		<input type="text" name="phone" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">地址:</span>
			            		<input type="text" name="address" />
			            	</p>
			            	<p id="modalP1">
			            		<span class="modalSpan">性别:</span>
			            		<input type="radio" name="sex" id="sex" value="男" />男
			            		<input type="radio" name="sex" id="sex" value="女" />女
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年龄:</span>
			            		<input type="text" name="age" />
			            	</p>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="add()">提交</button>
			            </div>
			        </div>
			    </div>
			</div>
				<!-- 修改老师的模态框 -->
				
				<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">修改老师信息</h4>
			            </div>
			            <div class="modal-body">
			             <p id="modalP">
			            		<span class="modalSpan">编号:</span>
			            		<input type="text" name="id1" readonly='readonly' />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">教师姓名:</span>
			            		<input type="text" name="teacherName1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年级:</span>
			            		<input type="text" name="gradeName1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">手机号:</span>
			            		<input type="text" name="phone1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">地址:</span>
			            		<input type="text" name="address1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">性别:</span>
			            		<input type="text" name="sex1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年龄:</span>
			            		<input type="text" name="age1" />
			            	</p>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="Upd()">提交</button>
			            </div>
			        </div>
			    </div>
			</div>
		</div>
	</div>
</body>
</html>